<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本</title>
<!--    <link rel="stylesheet" href="../../css/bootstrap.min.css">-->
<!--    <link rel="stylesheet" href="../../bootstrap-icons-1.13.1/bootstrap-icons.min.css">-->
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim" crossorigin="anonymous"></script>

</head>
<body>
    <div class="row">
        <!--
            text-truncate： 截断长文本用省略号代替放不下的内容
            text-nowrap ： 溢出显示
            text-wrap  : 溢出换行（默认）
        -->
        <div class="col-2 text-truncate border">
            这是一个很长很长很长的文本
        </div>
         <div class="col-2 text-nowrap border">
            这是一个很长很长很长的文本
        </div>
         <div class="col-2 text-wrap border">
            这是一个很长很长很长的文本
        </div>


    </div>
        <p class="fs-1">这是一个文本</p>
        <p class="fs-2">这是一个文本</p>
        <p class="fs-3">这是一个文本</p>
        <p class="fs-4">这是一个文本</p>
        <p class="fs-5">这是一个文本</p>
        <p class="fs-6">这是一个文本</p>
</body>
</html>